<template>
	<view>
		<!-- 顶部导航 -->
		<!-- <fa-navbar title="商城" :border-bottom="false"></fa-navbar> -->
    <view class="u-p-l-20 u-p-r-20 u-p-t-10">
      <view class="serch" @click="goPage('/pages/search/search')">
        <image src="../../static/image/ss.png" class="ss" mode=""></image>
        <text class="u-m-l-10">{{keyword}}</text>
      </view>
    </view>
    <!-- <u-tabs :list="goods" style="padding: 20rpx 30rpx 40rpx;" active-color="#151515" :is-scroll="false" :current="goodsIndex" @change="change1"></u-tabs> -->
    <scroll-view v-if="goods" scroll-x="true" class="zb-scroll-x">
      <view v-for="(item, index) in goods" :key="index" class="item" :class="{on: goodsIndex == index}" @click="goodsIndex = index">{{item.name}}</view>
    </scroll-view>
		
    <view v-if="goods && goods.length > 0 && goods[goodsIndex].goods" class="goods-list">
      
			<view class="item" v-for="(item, index) in goods[goodsIndex].goods" :key="index" @click="goPage('/pages/goods/detail?id=' + item.id)">
				<view class="images"><image :src="item.image || vuex_config.default_goods_img" mode="aspectFill"></image></view>
				<view class="u-p-15 name">
					<text class="u-line-2">{{ item.title }}</text>
				</view>
				<view class="foot u-flex u-row-between u-tips-color">
					<view class="font24">
						<text class="u-m-r-10">销量</text>
						<text>{{ item.sales }}</text>
					</view>
					<view class="font24">
						<text class="u-m-r-10">浏览</text>
						<text>{{ item.views || 0 }}</text>
					</view>
				</view>
				<view class="u-flex u-row-between u-p-15">
					<view class="price">
						<text>￥{{ item.price }}</text>
					</view>
				</view>
			</view>
			<!-- 空数据 -->
			<view class="u-flex u-row-center fa-empty top-15" v-if="!goods[goodsIndex].goods">
				<image src="../../static/image/data.png" mode=""></image>
				<view class="u-tips-color">暂无更多的商品数据~</view>
			</view>
		</view>
    
    <!-- 空数据 -->
    <view class="u-flex u-row-center fa-empty top-15" v-if="goods.length === 0">
    	<image src="../../static/image/data.png" mode=""></image>
    	<view class="u-tips-color">暂无更多的商品数据~</view>
    </view>
		
    <!-- 加载更多 -->
		<view class="u-p-b-30" style="background-color: #F6F7F7;" v-if="goods.length"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
export default {
	onLoad(e) {
		this.category_id = e.category_id || '';
		this.keyword = e.keyword || '';
    console.log('keyword-------------------', this.keyword)
		this.getGoods();
	},
	data() {
		return {
			category_id: 1,
			goods: [],
      goodsIndex:0,
			scrollTop: 0,
			status: 'loadmore',
			is_update: false,
			has_more: false,
			page: 1,
			keyword: '',
			query:{}
		};
	},
	methods: {
		search(e) {
			this.page = 1;
			this.is_update = true;
			this.keyword = e;
			this.getGoods();
		},
		change(query){
			this.query = query;
			this.page = 1;
			this.is_update = true;
			this.getGoods();
		},
    change1(query){
      console.log('change1',query )
    	this.page = 1;
      this.goodsIndex = query
    	this.is_update = true;
    	this.getGoods();
    },
		getGoods() {
			this.$api.getCategory({ category_mode: 1,  goods_name: this.keyword}).then(res => {
				if (res.code == 1) {
					// if (this.is_update) {
					// 	this.goods = [];
					// 	this.is_update = false;
					// }
          // this.goods = [];
          const list = res.data.filter(n=>n.goods && n.goods.length > 0)
          console.log('res.data.data---', list)
					this.goods = [...list];
					// this.has_more = res.data.current_page < res.data.last_page;
				}
			});
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		// if (this.has_more) {
		// 	this.status = 'loading';
		// 	this.page++;
		// 	this.getGoods();
		// }
	}
};
</script>

<style lang="scss">
  .serch{height: 80rpx; border-radius: 12rpx; background-color: #F5F7FB; display: flex; align-items: center; padding-left: 24rpx; margin-top: 20rpx;}
  .ss{width: 32rpx; height: 32rpx;}
/deep/.uni-input-placeholder{background-color: #F5F7FB;}
/deep/.content,/deep/.uni-input-input{background-color: #F5F7FB !important; box-shadow: none !important;}
/deep/.content-box{justify-content: flex-start !important;}
page {
	background-color: #f4f6f8;
}
.zb-scroll-x{
  white-space: nowrap; width: 92%; margin: 0 auto;
  .item{display: inline-block; vertical-align: top; margin-right: 44rpx; font-size: 30rpx; line-height: 80px; color: #666;}
  .on{color: #000;}
}
</style>
<style lang="scss" scoped>
.font24{font-size: 24rpx;}
.goods-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 30rpx; background-color: #F6F7F7;
	.item {
		width: 49%;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.name {
			min-height: 110rpx; font-size: 28rpx;
		}
		.foot {
			padding: 0 15rpx;
		}
		.images {
			width: 100%; padding: 12rpx 12rpx 0; 
			height: 352rpx;
			image {
				width: 100%;border-radius: 10rpx;
				height: 100%;
			}
		}
		.market_price {
			text-decoration: line-through;
			margin-left: 10rpx;
		}
    .price{color: #EE175D; font-size: 30rpx; font-weight: bold;}
	}
}
</style>
